<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>题库</title>
    <div th:replace="~{fragments/head-base}"></div>
    <!--Page level styles-->
    <!--heard script-->
    <style type="text/css">

    </style>
</head>

<!--Page head script-->

<!--end of Page head script-->
<body class="body sidebar-left-hidden fixedNav_position fixedMenu_left">
<div class="preloader" style=" position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100000;
  backface-visibility: hidden;
  background: #ffffff;">
    <div class="preloader_img" style="width: 200px;
  height: 200px;
  position: absolute;
  left: 48%;
  top: 48%;
  background-position: center;
z-index: 999999">
        <img th:src="@{/img/loader.gif}" style=" width: 50px;" alt="loading...">
    </div>
</div>
<div id="wrap">
    <div th:replace="~{fragments/top :: top}"></div>
    <!-- /#top -->
    <div class="wrapper fixedNav_top">
        <div th:replace="~{fragments/left :: left}"></div>
        <!-- /#left -->
        <div id="content" class="bg-container">
            <header class="head">
                <div class="main-bar">
                    <div class="row no-gutters">
                        <div class="col-6">
                            <h4 class="m-t-5">
                                <i class="fa fa-book"></i><span class="ml-1">题库</span>
                            </h4>
                        </div>
                    </div>
                </div>
            </header>
            <div class="outer">
                <div class="inner bg-container">
                    <div id="problemApp">
                        <!--title-->
                        <div class="row">
                            <div class="col-8">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="w-75">
                                            <div class="input-group">
                                                <input type="search" id="keyword" name="keyword" th:value="${keyword}"
                                                       placeholder="题号、标题" class="form-control">
                                                <span class="input-group-btn">
                                        <button class="btn btn-primary" type="button" onclick="clickPage(1)">
                                        <span class="glyphicon glyphicon-search" aria-hidden="true">
                                        </span><i class="fa fa-search"></i>
                                        </button>
                                        </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="float-right">
                                            <div class="float-right ml-3">
                                                <select id="level" name="level" onchange="clickPage(1)"
                                                        class="select2-level"
                                                        style="width: 100px;">
                                                    <option value="-1">不限</option>
                                                    <option value="1">简单</option>
                                                    <option value="2">中等</option>
                                                    <option value="3">困难</option>
                                                    <option value="4">专家</option>
                                                </select>
                                            </div>

                                            <select id="sort" name="sort" onchange="clickPage(1)" class="select2-sort"
                                                    style="width: 100px;">
                                                <option value="-1">默认排序</option>
                                                <option value="1">最新排序</option>
                                                <option value="2">最多通过</option>
                                            </select>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-4">
                                <button class=" w-100 btn button-rounded btn-primary  glow_button"
                                        onclick="randomProblem()"><i
                                        class="fa fa-random"></i><span class="ml-1">帮我随机选择一题</span>
                                </button>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <!--problemList-->
                            <div class="col-8">
                                <div class="card p-3">
                                    <div class="card-body">
                                        <table class="table table-hover table-striped" id="table">
                                            <thead class="">
                                            <tr>
                                                <th class="text-center">状态</th>
                                                <th class="text-center">题号</th>
                                                <th class="">标题</th>
                                                <th class="">标签</th>
                                                <th class="text-center">提交</th>
                                                <th class="text-center">通过率</th>
                                                <th class="text-center">年份</th>
                                                <th class="text-center">难度</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="(problem,index) in problemList">

                                                <td class="text-center" v-if="problem.userStatus == null"></td>
                                                <td class="text-center" v-if="problem.userStatus == 1"><i
                                                        class="fa fa-minus text-warning"></i></td>
                                                <td class="text-center" v-if="problem.userStatus == 2"><i
                                                        class="fa fa-check text-success "></i></td>

                                                <td class="text-center">{{problem.id}}</td>
                                                <td>

                                                    <div style="width: 250px;text-overflow:ellipsis; overflow:hidden; white-space:nowrap;">
                                                        <a :href="'/problem/problemDetailPage?problemId='+problem.id"
                                                           class="text-primary">
                                                            {{problem.name}}
                                                        </a>
                                                    </div>

                                                </td>
                                                <td>
                                                    <div style="width: 200px">
                                                        <i class="fa fa-tags mr-1"></i>
                                                        <span v-if="problem.tags != null">
                                                        <span class="mr-2" v-for="tag in problem.tags.split(',')">
                                                        <a>{{tag}}</a>
                                                        </span>
                                                    </span>
                                                    </div>
                                                </td>
                                                <td class="text-center">{{problem.submitCount}}</td>
                                                <td class="text-center">
                                                    <span v-if="problem.submitCount != 0">
                                                        <span>{{(problem.acCount*1.0/problem.submitCount*100) | formatNum}}%</span>
                                                    </span>
                                                    <span v-if="problem.submitCount == 0">0.00%</span>
                                                </td>
                                                <td class="text-center">{{problem.createTime | formatYear}}</td>
                                                <td class="text-center">
                                                <span v-if="problem.level == 1">
                                                    <span class=" btn-success btn-sm purple">简单</span>
                                                </span>
                                                    <span v-if="problem.level == 2">
                                                    <span class=" btn-primary btn-sm purple">中等</span>
                                                </span>
                                                    <span v-if="problem.level == 3">
                                                    <span class=" btn-warning btn-sm purple">困难</span>
                                                </span>
                                                    <span v-if="problem.level == 4">
                                                    <span class=" btn-danger btn-sm purple">专家</span>
                                                </span>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <!--page-->
                                <div class="row mt-3">
                                    <div class="" style="margin: 0 auto">
                                        <ul class="page" maxshowpageitem="5" pagelistcount="20" id="page"></ul>
                                    </div>
                                </div>
                                <!--#page-->
                            </div>

                            <!--#problemList-->

                            <!--right-->
                            <div class="col-4">
                                <div class="card">
                                    <div class="card-header bg-white"><i class="fa fa-bars mr-1"></i>题目分类</div>
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col-4 nav-item dropdown " th:each="tag,status:${tagList}">
                                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
                                                   role="button" data-toggle="dropdown" aria-haspopup="true"
                                                   aria-expanded="false">
                                                    [[${tag.name}]]
                                                </a>
                                                <div class="dropdown-menu " aria-labelledby="navbarDropdown">
                                                    <div style="padding: 15px 1.5rem 0 1.5rem"
                                                         class="left_align custom-controls-stacked">
                                                        <label class="custom-control custom-checkbox">
                                                            <input type="checkbox"
                                                                   th:classappend="'tagIds'+${tag.id} +' '+'ptagIds'+${tag.id} "
                                                                   class="custom-control-input"
                                                                   onclick="clickAllTag(this)" th:value="${tag.id}">
                                                            <span class="custom-control-indicator"></span>
                                                            <span class="custom-control-description primary-hover">选择全部</span>
                                                        </label>
                                                    </div>
                                                    <!--<a class="dropdown-item" href="#">选择全部</a>-->
                                                    <div class="dropdown-divider"></div>
                                                    <div th:each="ctag,cStatus:${tag.tagList}"
                                                         style="padding: 3px 1.5rem;">
                                                        <div class="left_align custom-controls-stacked">
                                                            <label class="custom-control custom-checkbox">
                                                                <input type="checkbox"
                                                                       th:attr="pid=${tag.id}"
                                                                       th:classappend="'tagIds'+${tag.id}"
                                                                       class="custom-control-input "
                                                                       onclick="clickTag(this)" th:value="${ctag.id}">
                                                                <span class="custom-control-indicator"></span>
                                                                <span class="custom-control-description primary-hover">[[${ctag.name}]]</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!--<div class="card mt-3">
                                    <div class="card-header bg-white"><i class="fa fa-tags mr-1"></i>标签云</div>
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col-12">
                                                <a th:href="@{'/problem/problemListPage?tagId='+${tagId}}"
                                                   class="btn btn-secondary mt-3 mr-3 glow_button text-primary">
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>-->

                               <!-- <div class="card mt-3">
                                    <div class="card-header bg-white"><i class="fa fa-clock-o mr-1"></i>时间</div>
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col-12">
                                            </div>
                                        </div>
                                    </div>
                                </div>-->
                            </div>
                            <!--#right-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.inner -->
    </div>
    <!-- /.outer -->

    <!-- /#content -->
    <!-- Modal -->
    <div th:replace="~{fragments/modal}"></div>
    <!--#Modal-->
    <!--wrapper-->
    <!-- /#content -->
    <!-- # right side -->
</div>
<!-- /#wrap -->
<!-- global scripts-->
<div th:replace="~{fragments/footer :: footer}"></div>
<!--end of global scripts-->
<script type="text/javascript" th:src="@{/js/pages/problem_list.js}"></script>

<script th:inline="javascript" type="text/javascript">
    /*<![CDATA[*/

    // vue
    var problemApp = new Vue({
        el: '#problemApp',
        data: {
            total: 0,
            problemList: [],
            tagIdList: []
        },
        filters: {
            formatDate: function (val) {
                var value = new Date(val);
                var year = value.getFullYear();
                var month = padDate(value.getMonth() + 1);
                var day = padDate(value.getDate());
                var hour = padDate(value.getHours());
                var minutes = padDate(value.getMinutes());
                var seconds = padDate(value.getSeconds());
                return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
            },
            formatYear: function (val) {
                var value = new Date(val);
                var year = value.getFullYear();
                return year;
            },
            formatNum: function (val) {
                //四舍五入
                return  parseFloat(val).toFixed(2);
            }
        },
        methods: {
            listProblem: function (pageNum) {
                var keyword = $("#keyword").val();
                var level = $('#level').val();
                var sort = $('#sort').val();
                var url = 'problem/listProblem2Page';
                var tagIds = "";
                if (this.tagIdList.length > 0) {
                    tagIds = this.tagIdList.join(",");
                }
                this.$http.post(url, {
                    "pageNum": pageNum,
                    "tagIds": tagIds,
                    "keyword": keyword,
                    "sort": sort,
                    "level": level
                }, {emulateJSON: true}).then(function (res) {
                    this.total = res.data.data.total;
                    this.problemList = res.data.data.list;
                    $("#page").initPage(this.total, pageNum, clickPage);
                }), function (res) {
                    console.log(res.data.msg);
                }
            }
        }
    });
    problemApp.listProblem(1);

    //分页点击方法
    function clickPage(pageNum) {
        problemApp.listProblem(pageNum);
    }

    //标签点击方法
    function clickTag(checkbox) {
        var index = problemApp.tagIdList.indexOf($(checkbox).val());
        if (checkbox.checked) {
            if (index === -1) {
                problemApp.tagIdList.push($(checkbox).val());
            }
        } else {
            if (index !== -1) {
                problemApp.tagIdList.splice(index, 1);
            }
            //去除全部选项id
            var tagId = $(checkbox).attr("pid");
            var $tagId = $(".ptagIds" + tagId);
            $tagId.prop("checked", false);
            var pIndex = problemApp.tagIdList.indexOf(tagId);
            if(pIndex !== -1){
                problemApp.tagIdList.splice(pIndex, 1);
            }

        }
        problemApp.listProblem(1);
    }

    //标签点击全部
    function clickAllTag(checkbox) {
        var tagId = $(checkbox).val();
        var $tagId = $(".tagIds" + tagId);
        if (checkbox.checked) {
            $tagId.prop("checked", true);
            $tagId.each(function (index, val) {
                var valIndex = problemApp.tagIdList.indexOf($(val).val());
                if (valIndex === -1) {
                    problemApp.tagIdList.push($(val).val());
                }
            });
        } else {
            $tagId.prop("checked", false);
            $tagId.each(function (index, val) {
                var valIndex = problemApp.tagIdList.indexOf($(val).val());
                if(valIndex !== -1){
                    problemApp.tagIdList.splice(valIndex, 1);
                }
            });
        }

        problemApp.listProblem(1);
    }

    // end of vue


    //select2
    $('.select2-sort').select2({
        placeholder: '排序',
        theme: 'bootstrap4'
    });
    $('.select2-level').select2({
        placeholder: '难度',
        theme: 'bootstrap4'
    });


    /*]]>*/
</script>

</body>

</html>
